{% extends "base.html" %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">饮食记录</h1>
        <a href="{{ url_for('main.add_meal') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> 添加记录
        </a>
    </div>

    <!-- 营养摄入统计图 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <canvas id="nutritionChart"></canvas>
        </div>
    </div>

    <!-- 搜索和过滤 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <label for="start_date" class="form-label">开始日期</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" 
                           value="{{ start_date }}">
                </div>
                <div class="col-md-3">
                    <label for="end_date" class="form-label">结束日期</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" 
                           value="{{ end_date }}">
                </div>
                <div class="col-md-2">
                    <label for="meal_type" class="form-label">餐食类型</label>
                    <select class="form-select" id="meal_type" name="meal_type">
                        <option value="" {% if not meal_type %}selected{% endif %}>全部</option>
                        <option value="早餐" {% if meal_type == '早餐' %}selected{% endif %}>早餐</option>
                        <option value="午餐" {% if meal_type == '午餐' %}selected{% endif %}>午餐</option>
                        <option value="晚餐" {% if meal_type == '晚餐' %}selected{% endif %}>晚餐</option>
                        <option value="加餐" {% if meal_type == '加餐' %}selected{% endif %}>加餐</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="sort" class="form-label">排序</label>
                    <select class="form-select" id="sort" name="sort">
                        <option value="meal_date" {% if sort == 'meal_date' %}selected{% endif %}>按时间</option>
                        <option value="calories" {% if sort == 'calories' %}selected{% endif %}>按热量</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="per_page" class="form-label">每页显示</label>
                    <select class="form-select" id="per_page" name="per_page">
                        <option value="10" {% if per_page == 10 %}selected{% endif %}>10条</option>
                        <option value="20" {% if per_page == 20 %}selected{% endif %}>20条</option>
                        <option value="50" {% if per_page == 50 %}selected{% endif %}>50条</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> 查询
                    </button>
                    <a href="{{ url_for('main.meal_records') }}" class="btn btn-secondary">
                        <i class="fas fa-redo"></i> 重置
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- 记录列表 -->
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>时间</th>
                            <th>类型</th>
                            <th>食物</th>
                            <th>热量(kcal)</th>
                            <th>蛋白质(g)</th>
                            <th>脂肪(g)</th>
                            <th>碳水(g)</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for meal in meals.items %}
                        <tr>
                            <td>{{ meal.meal_date.strftime('%Y-%m-%d') }}</td>
                            <td>{{ meal.meal_time.strftime('%H:%M') }}</td>
                            <td>{{ meal.meal_type }}</td>
                            <td>{{ meal.food_name }}</td>
                            <td>{{ meal.calories or '' }}</td>
                            <td>{{ "%.1f"|format(meal.protein) if meal.protein else '' }}</td>
                            <td>{{ "%.1f"|format(meal.fat) if meal.fat else '' }}</td>
                            <td>{{ "%.1f"|format(meal.carbs) if meal.carbs else '' }}</td>
                            <td>{{ meal.note or '' }}</td>
                            <td>
                                <form action="{{ url_for('main.delete_meal', id=meal.id) }}" 
                                      method="post" class="d-inline"
                                      onsubmit="return confirm('确定要删除这条记录吗？');">
                                    <button type="submit" class="btn btn-sm btn-outline-danger">删除</button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            {% if meals.pages > 1 %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item {% if not meals.has_prev %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('main.meal_records', page=meals.prev_num,
                           start_date=start_date, end_date=end_date, meal_type=meal_type,
                           sort=sort, order=order, per_page=per_page) }}">
                            上一页
                        </a>
                    </li>
                    {% for p in range(meals.pages + 1) %}
                        {% if p > 0 and p > meals.page - 3 and p < meals.page + 3 %}
                        <li class="page-item {% if p == meals.page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('main.meal_records', page=p,
                               start_date=start_date, end_date=end_date, meal_type=meal_type,
                               sort=sort, order=order, per_page=per_page) }}">
                                {{ p }}
                            </a>
                        </li>
                        {% endif %}
                    {% endfor %}
                    <li class="page-item {% if not meals.has_next %}disabled{% endif %}">
                        <a class="page-link" href="{{ url_for('main.meal_records', page=meals.next_num,
                           start_date=start_date, end_date=end_date, meal_type=meal_type,
                           sort=sort, order=order, per_page=per_page) }}">
                            下一页
                        </a>
                    </li>
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('{{ url_for("main.meal_stats") }}')
        .then(response => response.json())
        .then(data => {
            const ctx = document.getElementById('nutritionChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.dates,
                    datasets: [
                        {
                            label: '热量(kcal)',
                            data: data.calories,
                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 1,
                            yAxisID: 'y'
                        },
                        {
                            label: '蛋白质(g)',
                            data: data.protein,
                            backgroundColor: 'rgba(54, 162, 235, 0.5)',
                            borderColor: 'rgb(54, 162, 235)',
                            borderWidth: 1,
                            yAxisID: 'y1'
                        },
                        {
                            label: '脂肪(g)',
                            data: data.fat,
                            backgroundColor: 'rgba(255, 206, 86, 0.5)',
                            borderColor: 'rgb(255, 206, 86)',
                            borderWidth: 1,
                            yAxisID: 'y1'
                        },
                        {
                            label: '碳水(g)',
                            data: data.carbs,
                            backgroundColor: 'rgba(75, 192, 192, 0.5)',
                            borderColor: 'rgb(75, 192, 192)',
                            borderWidth: 1,
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            type: 'linear',
                            position: 'left',
                            title: {
                                display: true,
                                text: '热量 (kcal)'
                            }
                        },
                        y1: {
                            type: 'linear',
                            position: 'right',
                            title: {
                                display: true,
                                text: '营养素 (g)'
                            },
                            grid: {
                                drawOnChartArea: false
                            }
                        }
                    }
                }
            });
        });
});
</script>
{% endblock %}
{% endblock %} 